<template>
  <v-card flat outlined class="chat-item" :variant="selected ? 'tonal' : 'flat'" :class="{ selected }" @click="$emit('click')">
    <v-row no-gutters align="center" class="pa-2">
      <v-col cols="3" class="d-flex justify-center">
        <v-avatar size="40" :color="chat.color || 'deep-purple accent-4'">
          <span class="white--text text-h6 font-weight-bold">{{ chat.initials }}</span>
        </v-avatar>
      </v-col>
      <v-col cols="7" class="d-flex flex-column justify-center">
        <div class="font-weight-medium text-truncate" :class="selected ? '' : 'text-medium-emphasis'">
          {{ chat.name }}
        </div>
        <div class="text-caption text-truncate" :class="selected ? '' : 'text-medium-emphasis'">
          {{ chat.lastMessage }}
        </div>
      </v-col>
      <v-col cols="2" class="d-flex justify-end">
        <v-badge v-if="chat.unread > 0" :content="chat.unread" color="error" dot overlap class="mr-2" />
      </v-col>
    </v-row>
  </v-card>
</template>

<script setup lang="ts">
defineProps<{
  chat: any,
  selected: boolean,
}>()

defineEmits(['click'])
</script>
